<template>
    <div class="loginContain">
        <div class="loginLeft">
            <div class="top">
                <img src="@/assets/login/ywu.png" class="topLogo" alt="">
                <span class="topSpan">
                    YWU 一站式应用管理
                </span>
            </div>
            <div class="bottom">
                <img src="@/assets/login/ywu.png" class="bottomImg" alt=""/>
            </div>
        </div>
        <div class="loginRight" v-if="loginFlag">
            <div class="top">
                <div class="title">
                    <span>
                        登录
                    </span>
                </div>
            </div>
            <div class="bottom">
                <div class="inputContain">
                    <div class="elInput">
                        <el-input v-model="userName" placeholder="输入用户名" :prefix-icon="User" input-style="font-size:15px;height:35px"/>
                    </div>
                    <div class="elInput">
                        <el-input v-model="password" type="password" show-password placeholder="输入密码" :prefix-icon="Lock" input-style="font-size:15px;height:35px"/>
                    </div>
                    <div class="elInput">
                        <el-input v-model="verifyCode" placeholder="输入验证码" :prefix-icon="CircleCheck" input-style="font-size:15px;height:35px"/>
                        <img class="verifyCodeImg" :src="url" @click="verifyCodeImageClick()" alt="">
                    </div>
                    <el-button type="primary" round :loading="loginLoading" class="loginButton" @click="loginUserPre()">登录</el-button>
                </div>
                <div class="buttonContain">
                    <Divider class="dividerSpan">其他登录方式 - 暂未使用</Divider>
                    <div class="commonIcon">
                        <WechatOutlined style="font-size: 40px"/>
                        <QqOutlined class="iconInfo" style="font-size: 40px"/>
                        <GithubOutlined style="font-size: 40px"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="loginRight" v-if="!loginFlag">
            <div class="top">
                <div class="title">
                    <span>
                        登录租户
                    </span>
                </div>
            </div>
            <div class="bottom">
                <div class="tenantInputContain">
                    <el-button v-for="item in loginTenantList" :key="item.id" :loading="item.loading" type="primary" class="loginButton" round  @click="loginUserAction(item)">
                        {{ item["tenantNameCn"] }}</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Login">
import {loginUser, loginUserCheck, loginVerifyCode} from '@/request/login'
import { WechatOutlined, QqOutlined, GithubOutlined } from '@ant-design/icons-vue';
import { Divider } from 'ant-design-vue';
import { User, Lock, CircleCheck } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 路由跳转操作
const router = useRouter()
// 登录标识位，true为登录，false为选择租户
let loginFlag = ref(true);
// 登录按钮的loading
let loginLoading = ref(false);
// 登录后当前用户的所有租户
let loginTenantList = ref([]);
// 登录之后，选择登录租户，需要验证之前登录的用户，此处存在校验登录的随机字符串
let loginCheckStr = ref("");
// 登录元信息
let userName = ref("");
let password = ref("");
let verifyCode = ref("");
// 验证码图片
let url = ref("");

// 页面初始化时调用验证码接口
verifyCodeImageClick();

// 获取验证码
function verifyCodeImageClick() {
    loginVerifyCode().then(res => {
        url.value = res.data
    })
}

// 登录用户第一步骤
function loginUserPre() {
    loginLoading.value = true
    let userInfo = {
        userAccount: userName.value,
        userPassword: password.value,
        verifyCode: verifyCode.value
    }
    loginUserCheck(userInfo).then(res => {
        if (res["code"] === '200') {
            // 校验登录成功，选择登录租户
            loginLoading.value = false
            // 登录校验返回的随机码，后续选择租户真实登录时需要校验此随机码
            loginCheckStr.value = res.data.loginCheckRandomStr
            // 当前登录用户所属的租户列表
            loginTenantList.value = res.data["tenantData"]
            loginFlag.value = false
        }
    }).catch(res => {
        loginLoading.value = false
    })
}

// 选择租户后登录用户
function loginUserAction(tenantItem) {
    tenantItem.loading = true
    let userInfo = {
        userAccount: userName.value,
        loginCheckRandomStr: loginCheckStr.value,
        tenantId: tenantItem.tenantId
    }
    loginUser(userInfo).then(res => {
        if (res["code"] === '200') {
            // 登录成功
            router.push("/");
        } else {
            tenantItem.loading = false
        }
    }).catch(res => {
        tenantItem.loading = false
    })
}
</script>

<style scoped lang="less">
.loginContain {
    width: 1100px;
    height: 600px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    .loginLeft {
        float: left;
        width: 50%;
        height: 100%;
        .top {
            //width: 100%;
            height: 80px;
            // 水平、垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            .topLogo {
                width: 30px;
            }
            .topSpan {
                font-size: 25px;
                margin-left: 20px;
                color: #037cde;
                //去除光标
                caret-color: transparent;
            }
        }
        .bottom {
            width: 500px;
            height: 300px;
            // 水平、垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            //去除光标
            caret-color: transparent;
            .bottomImg {
                margin-top: 150px;
                width: 55%;
            }
        }
    }
    .loginRight {
        float: right;
        width: 50%;
        height: 100%;
        .top {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 15%;
            .title {
                span {
                    font-size: 22px;
                    color: #037cde;
                    //去除光标
                    caret-color: transparent;
                }
            }
        }
        .bottom {
            width: 100%;
            height: 85%;
            .inputContain {
                width: 95%;
                height: 75%;
                margin: 0 auto;
                .elInput {
                    width: 100%;
                    height: 20%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .verifyCodeImg {
                        display: block;
                        width: 50%;
                        height: 45%;
                        //去除光标
                        caret-color: transparent;
                    }
                    .verifyCodeImg:hover {
                        cursor: pointer;
                    }
                }
                .loginButton {
                    width: 100%;
                    height: 10%;
                    margin-top: 8%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .buttonContain {
                width: 100%;
                height: 25%;
                .dividerSpan {
                    margin: 0;
                    padding: 0;
                    //去除光标
                    caret-color: transparent;
                }
                .commonIcon {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 5%;
                    .iconInfo {
                        margin-left: 10%;
                        margin-right: 10%;
                    }
                }
            }
            .tenantInputContain {
                overflow: auto;
                width: 95%;
                height: 85%;
                margin: 0 auto;
                .loginButton {
                    width: 100%;
                    margin-left: 0px;
                    margin-bottom: 5%;
                }
            }
        }
    }
}
/* 美化整个滚动条 */
::-webkit-scrollbar {
    width: 12px; /* 设置滚动条的宽度 */
    background-color: #f9f9f9; /* 滚动条的背景颜色 */
}

/* 美化滚动条轨道 */
::-webkit-scrollbar-track {
    background: #e1e1e1; /* 轨道的背景颜色 */
    border-radius: 10px; /* 轨道的圆角大小 */
}

/* 美化滚动条的滑块 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /* 滑块的背景颜色 */
    border-radius: 10px; /* 滑块的圆角大小 */
    border: 2px solid #ffffff; /* 滑块边框 */
}

/* 当滑块悬停或活动时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* 悬停或活动状态下滑块的背景颜色 */
}
</style>